<template>
    <div class="common-page page-org-client" v-loading.fullscreen="loading">
        <div class="common-page__head">
            <comp-paths class="route" :paths="['/org', '/org/clients', $route.fullPath]"></comp-paths>
            <div class="title" v-if="client">
                <span class="text">{{ client.name }}</span>
                <span class="flag">{{ client.roleText }}</span>
            </div>
            <div class="title" v-else></div>
        </div>
        <comp-tabs class="common-page__head" :tabs="[$route.fullPath, '/org/client/companys?clientId=' + clientId, '/org/client/attendances?clientId=' + clientId]"></comp-tabs>
        <div class="common-page__body common-form" v-if="client">
            <div class="rows">
                <div class="row row--head">
                    <div class="name">基本信息</div>
                    <div class="value">
                        <span class="button button--edit" @click="setClient()">编辑</span>
                    </div>
                </div>
                <div class="row">
                    <div class="name">工号</div>
                    <div class="value">{{ client.number }}</div>
                </div>
                <div class="row">
                    <div class="name">姓名</div>
                    <div class="value">{{ client.name }}</div>
                </div>
                <div class="row">
                    <div class="name">性别</div>
                    <div class="value">{{ client.sexText }}</div>
                </div>
                <div class="row">
                    <div class="name">身份证号</div>
                    <div class="value">{{ client.sequence }}</div>
                </div>
                <div class="row">
                    <div class="name">角色</div>
                    <div class="value">{{ client.roleText }}</div>
                </div>
                <div class="row">
                    <div class="name">冻结状态</div>
                    <div class="value">
                        <span class="el-status--danger" v-if="client.banned === 'yes'"></span>
                        <span class="el-status--success" v-else-if="client.banned === 'not'"></span>
                        <span>{{ client.bannedText }}</span>
                    </div>
                </div>
                <div class="row">
                    <div class="name">注册时间</div>
                    <div class="value">{{ client.createdAt }}</div>
                </div>
                <div class="row">
                    <div class="name">最近登录时间</div>
                    <div class="value">{{ client.lastLoginAt }}</div>
                </div>
                <div class="row">
                    <div class="name">最近活跃时间</div>
                    <div class="value">{{ client.lastActiveAt }}</div>
                </div>
                <div class="row">
                    <div class="name">激活状态</div>
                    <div class="value">
                        <span class="el-status--danger" v-if="client.flag === 'not'"></span>
                        <span class="el-status--success" v-else-if="client.flag === 'yes'"></span>
                        <span>{{ client.bandFlag }}</span>
                    </div>
                </div>
                <div class="row">
                    <div class="name">证明材料</div>
                    <div class="value">
                         <comp-files-viewer :files="sysStorageList" v-if="sysStorageList"></comp-files-viewer>
                        <span v-else>-</span>
                    </div>
                </div>
                <div class="row row--picture">
                    <img class="value" :src="client.avatar" v-if="client.avatar" />
                    <img class="value" :src="require('../assets/user-avatar.png')" v-else />
                </div>
            </div>
            <div class="rows">
                <div class="row row--head">
                    <div class="name">安全信息</div>
                    <div class="value"></div>
                </div>
                <div class="row">
                    <div class="name">手机号</div>
                    <div class="value">
                        <span class="text">{{ client.mobile }}</span>
                        <span class="button" @click="setClientMobile()">设置</span>
                    </div>
                </div>
                <div class="row">
                    <div class="name">登录密码</div>
                    <div class="value">
                        <span class="button" @click="setClientPassword()">设置</span>
                    </div>
                </div>
            </div>
            <div class="rows" v-if="client.role === 'holder'">
                <div class="row row--head">
                    <div class="name">应用授权信息</div>
                    <div class="value"></div>
                </div>
                <div class="row row--3x">
                    <div class="name">授权应用</div>
                    <div class="value">
                        <span class="text">{{ client.nodesText }}</span>
                        <span class="button" @click="setClientNodes()">设置</span>
                    </div>
                </div>
            </div>
            <div class="rows" v-if="client.role === 'holder' || client.role === 'officer'">
                <div class="row row--head">
                    <div class="name">所属部门信息</div>
                    <div class="value">
                        <span class="button button--add" @click="addClientDepment()">添加</span>
                    </div>
                </div>
                <div class="row row--2x">
                    <div class="value">
                        <el-table size="medium" border :data="client.depments">
                            <el-table-column label="部门" min-width="160">
                                <template #default="scope">{{ scope.row.dept.name }}</template>
                            </el-table-column>
                            <el-table-column label="身份" width="120">
                                <template #default="scope">{{ scope.row.roleText }}</template>
                            </el-table-column>
                            <el-table-column label="管理员" width="120">
                                <template #default="scope">{{ scope.row.primaryText }}</template>
                            </el-table-column>
                            <el-table-column label="职务" width="120">
                                <template #default="scope">{{ scope.row.duty || "-" }}</template>
                            </el-table-column>
                            <el-table-column label="操作" width="160">
                                <template #default="scope">
                                    <el-button type="primary" size="mini" @click.stop="setClientDepment('start', scope.row)">编辑</el-button>
                                    <el-button type="danger" size="mini" @click.stop="delClientDepment(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
            <!-- <div class="rows" v-if="client.role === 'holder' || client.role === 'officer'">
                <div class="row row--head">
                    <div class="name">所属单位信息</div>
                    <div class="value">
                        <span class="button button--add" @click="addClientDapment()">添加</span>
                    </div>
                </div>
                <div class="row row--2x">
                    <div class="value">
                        <el-table size="medium" border :data="client.dapments">
                            <el-table-column label="单位" min-width="120">
                                <template #default="scope">{{ scope.row.dapt.name }}</template>
                            </el-table-column>
                            <el-table-column label="级别" width="120">
                                <template #default="scope">{{ scope.row.level || "-" }}</template>
                            </el-table-column>
                            <el-table-column label="职务" width="120">
                                <template #default="scope">{{ scope.row.duty || "-" }}</template>
                            </el-table-column>
                            <el-table-column label="操作" width="160">
                                <template #default="scope">
                                    <el-button type="primary" size="mini" @click.stop="setClientDapment('start', scope.row)">编辑</el-button>
                                    <el-button type="danger" size="mini" @click.stop="delClientDapment(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div> -->
        </div>
        <comp-dialog title="编辑基本信息" width="360px" ref="clientSetForm">
            <el-form size="small" label-width="98px" @submit.native.prevent v-if="clientSetForm">
                <el-form-item label="头像：">
                    <img style="display: block; margin: 0 10px 10px 0; max-width: 120px; height: 60px" :src="clientSetForm.avatar" v-if="clientSetForm.avatar" />
                    <el-button type="plain" icon="el-icon-plus" @click="setClient('upload-avatar')">{{ clientSetForm.avatar ? "更换图片" : "选择图片" }}</el-button>
                </el-form-item>
                <el-form-item label="工号：" required>
                    <el-input ref="clientSetFormNumber" v-model="clientSetForm.number" style="width: 240px" placeholder="请输入" :maxlength="20" :readonly="loading" @change="setClient('validate')"></el-input>
                </el-form-item>
                <el-form-item label="姓名：" required>
                    <el-input v-model="clientSetForm.name" style="width: 240px" placeholder="请输入" :maxlength="20" :readonly="loading" @change="setClient('validate')"></el-input>
                </el-form-item>
                <el-form-item label="性别：" required>
                    <el-radio-group v-model="clientSetForm.sex" @change="setClient('validate')">
                        <el-radio v-for="data in env.userSexs" :key="data.id" :label="data.value">{{ data.name }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="角色：" required>
                    <el-select v-model="clientSetForm.role" style="width: 160px" @change="setClient('validate')">
                        <el-option v-for="data in env.userRoles" :key="data.id" :label="data.name" :value="data.value">{{ data.name }}</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="身份证号：">
                    <el-input v-model="clientSetForm.sequence" style="width: 240px" placeholder="请输入" :maxlength="20" :readonly="loading" @change="setClient('validate')"></el-input>
                </el-form-item>
                <el-form-item label="冻结状态：">
                    <el-select v-model="clientSetForm.banned" style="width: 160px" @change="setClient('validate')">
                        <el-option v-for="data in env.userBanneds" :key="data.id" :label="data.name" :value="data.value">{{ data.name }}</el-option>
                    </el-select>
                </el-form-item>
                  <el-form-item label="激活状态">
                    <el-select v-model="clientSetForm.flag" style="width: 160px" @change="setClient('validate')">
                        <el-option v-for="data in env.userEnable" :key="data.id" :label="data.name" :value="data.value">{{ data.name }}</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-check" @click="setClient('submit')">保存</el-button>
                    <el-button type="plain" icon="el-icon-close" @click="setClient('end')">放弃</el-button>
                </el-form-item>
            </el-form>
        </comp-dialog>
        <comp-dialog title="设置手机号" width="360px" ref="clientMobileSetForm">
            <el-form size="small" label-width="84px" @submit.native.prevent v-if="clientMobileSetForm">
                <el-form-item label="工号：">
                    <span>{{ clientMobileSetForm.number }}</span>
                </el-form-item>
                <el-form-item label="姓名：">
                    <span>{{ clientMobileSetForm.name }}</span>
                </el-form-item>
                <el-form-item label="手机号：">
                    <el-input ref="clientMobileSetFormMobile" v-model="clientMobileSetForm.mobile" style="width: 240px" placeholder="请输入" :maxlength="20" :readonly="loading" @change="setClientMobile('validate')"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-check" @click="setClientMobile('submit')">保存</el-button>
                    <el-button type="plain" icon="el-icon-close" @click="setClientMobile('end')">放弃</el-button>
                </el-form-item>
            </el-form>
        </comp-dialog>
        <comp-dialog title="设置登录密码" width="360px" ref="clientPasswordSetForm">
            <el-form size="small" label-width="98px" @submit.native.prevent v-if="clientPasswordSetForm">
                <el-form-item label="工号：">
                    <span>{{ clientPasswordSetForm.number }}</span>
                </el-form-item>
                <el-form-item label="姓名：">
                    <span>{{ clientPasswordSetForm.name }}</span>
                </el-form-item>
                <el-form-item label="登录密码：" required>
                    <el-input ref="clientPasswordSetFormPassword" v-model="clientPasswordSetForm.password" style="width: 240px" placeholder="请输入" :maxlength="20" :readonly="loading" @change="setClientPassword('validate')"></el-input>
                    <div style="margin-top: 10px; width: 240px; color: #aaa; line-height: 1.5">
                        <div>密码格式为8-20位字符。</div>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-check" @click="setClientPassword('submit')">保存</el-button>
                    <el-button type="plain" icon="el-icon-close" @click="setClientPassword('end')">放弃</el-button>
                </el-form-item>
            </el-form>
        </comp-dialog>
        <comp-dialog title="设置授权应用" width="380px" ref="clientNodesSetForm">
            <el-form size="small" label-width="98px" @submit.native.prevent v-if="clientNodesSetForm">
                <el-form-item label="授权应用：">
                    <el-checkbox-group v-model="clientNodesSetForm.nodes">
                        <el-checkbox style="margin-right: 18px" v-for="data in env.userNodes" :key="data.id" :label="data.value" :disabled="loading">{{ data.name }}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-check" @click="setClientNodes('submit')">保存</el-button>
                    <el-button type="plain" icon="el-icon-close" @click="setClientNodes('end')">放弃</el-button>
                </el-form-item>
            </el-form>
        </comp-dialog>
        <comp-dialog :title="clientDapment && clientDapment.id ? '编辑所属单位' : '添加所属单位'" width="360px" ref="clientDapment">
            <el-form size="small" label-width="84px" @submit.native.prevent v-if="clientDapment">
                <el-form-item label="单位：" required>
                    <el-tag style="margin: 0 10px 10px 0" disable-transitions v-if="clientDapment.dapt.id">{{ clientDapment.dapt.name }}</el-tag>
                    <div v-if="clientDapment.dapt.id"></div>
                    <el-button type="plain" icon="el-icon-plus" @click="setClientDapment('pick-dapt-start')">{{ clientDapment.dapt.id ? "更换单位" : "选择单位" }}</el-button>
                </el-form-item>
                <el-form-item label="级别：">
                    <el-input v-model="clientDapment.level" style="width: 240px" placeholder="请输入" :maxlength="100" :readonly="loading" @change="setClientDapment('validate')"></el-input>
                </el-form-item>
                <el-form-item label="职务：">
                    <el-input ref="clientDapmentDuty" v-model="clientDapment.duty" style="width: 240px" placeholder="请输入" :maxlength="100" :readonly="loading" @change="setClientDapment('validate')"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-check" @click="setClientDapment('submit')">{{ clientDapment.id ? "保存" : "添加" }}</el-button>
                    <el-button type="plain" icon="el-icon-close" @click="setClientDapment('end')">放弃</el-button>
                </el-form-item>
            </el-form>
        </comp-dialog>
        <comp-dialog title="选择单位" width="600px" height="80vh" ref="daptPicker">
            <comp-dapts style="height: 100%" ref="daptPickerList" expanded>
                <template #body="scope">
                    <el-button type="primary" size="mini" icon="el-icon-check" @click.stop="setClientDapment('pick-dapt-end', scope.data)">选择</el-button>
                </template>
                <template #foot="scope">
                    <el-button type="danger" size="small" icon="el-icon-close" @click="setClientDapment('pick-dapt-end')">放弃</el-button>
                </template>
            </comp-dapts>
        </comp-dialog>
        <comp-dialog :title="clientDepment && clientDepment.id ? '编辑所属部门' : '添加所属部门'" width="450px" ref="clientDepment">
            <el-form size="small" label-width="84px" @submit.native.prevent v-if="clientDepment">
                <el-form-item label="部门：" required>
                    <el-tag style="margin: 0 10px 10px 0" disable-transitions v-if="clientDepment.dept.id">{{ clientDepment.dept.name }}</el-tag>
                    <div v-if="clientDepment.dept.id"></div>
                    <el-button type="plain" icon="el-icon-plus" @click="setClientDepment('pick-dept-start')">{{ clientDepment.dept.id ? "更换部门" : "选择部门" }}</el-button>
                </el-form-item>
                <el-form-item label="身份：" required>
                    <el-radio-group v-model="roleUserDept" @change="setClientDepment('validate')">
                        <el-radio :label="'primary'">
                            管理员
                            <el-tooltip :content="'问题处理：可接收问题、查看问题详情、提交新问题、转派问题。\n'+
'企业与人员管理：负责审核企业资质信息及管理人员信息。\n'+
'数据统计与导出：能够导出所在地市问题事项办理情况及数据统计报表。'" placement="top">
                                <i class="el-icon-question"></i>
                            </el-tooltip>
                        </el-radio>
                        <el-radio v-for="data in env.depmentRoles" :key="data.id" :label="data.value">
                            {{ data.name }}
                            <el-tooltip :content="data.tooltip" placement="top">
                                <i class="el-icon-question"></i>
                            </el-tooltip>
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="职务：">
                    <el-input ref="clientDepmentDuty" v-model="clientDepment.duty" style="width: 240px" placeholder="请输入" :maxlength="100" :readonly="loading" @change="setClientDepment('validate')"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-check" @click="setClientDepment('submit')">{{ clientDepment.id ? "保存" : "添加" }}</el-button>
                    <el-button type="plain" icon="el-icon-close" @click="setClientDepment('end')">放弃</el-button>
                </el-form-item>
            </el-form>
        </comp-dialog>
        <comp-dialog title="选择部门" width="720px" height="80vh" ref="deptPicker">
            <comp-depts style="height: 100%" ref="deptPickerList" expanded v-if="clientDepment" :filter-value="filterValue">
                <template #head="scope">
                    <el-row>
                        <el-col :span="8" style="padding: 4px">
                            <el-input size="small" v-model="filterValue" placeholder="过滤部门" @change="filterDept()" @input="filterDept()"></el-input>
                        </el-col>
                        <el-col :span="16" style="padding: 4px">
                            <el-button
                              type="plain"
                              size="small"
                              icon="el-icon-search"
                              @click="filterDept()"
                            >过滤</el-button>
                        </el-col>
                    </el-row>
                </template>
                <template #body="scope">
                    <!-- <div>123</div> -->
                    <el-button type="primary" size="mini" icon="el-icon-check" @click.stop="setClientDepment('pick-dept-end', scope.data)">选择</el-button>
                </template>
                <template #foot="scope">
                    <el-button type="danger" size="small" icon="el-icon-close" @click="setClientDepment('pick-dept-end')">放弃</el-button>
                </template>
            </comp-depts>
        </comp-dialog>
    </div>
</template>

<script>
    import mixin from "../mixin";
    import { string, int, deepCopy, toMagicImgURL, selectFile, cache } from "../util";
    export default {
        name: "page-org-client",
        title: "用户详情",
        nodes: ["/menu/org"],
        childs: [],
        mixins: [mixin],
        data: () => ({
            loading: false,
            clientId: "",
            client: null,
            clientSetForm: null,
            clientMobileSetForm: null,
            clientPasswordSetForm: null,
            clientNodesSetForm: null,
            clientDapment: null,
            roleUserDept:null, // 用户在部门中的身份
            clientDepment: null,
            sysStorageList:null,
            filterValue:""
        }),
        methods: {
            setClient(action, data) {
                if (this.loading) return;
                let form = this.clientSetForm;
                if (!action || action === "start") {
                    this.clientSetForm = deepCopy(this.client);
                    this.setClient("validate");
                    this.$refs.clientSetForm.init();
                    this.$nextTick(() => this.$refs.clientSetFormNumber.focus());
                } else if (action === "validate") {
                    let error = "";
                    form.number = string(form.number).replace(/\s+/g, "");
                    error = error || (form.number ? "" : "请输入工号！");
                    form.name = string(form.name).trim();
                    error = error || (form.name ? "" : "请输入姓名！");
                    form.role = string(form.role).trim();
                    error = error || (form.role ? "" : "请选择角色！");
                    form.sex = form.sex || this.env.userSexs[0].value;
                    form.sequence = string(form.sequence).trim();
                    if (data) this.plugins.modal.toast(error, "error");
                    return !error;
                } else if (action === "upload-avatar") {
                    if (!data) return selectFile("image/*").then((file) => {
                        if (file.size > 5 * 1048576) this.plugins.modal.toast("图片过大，不能大于5MB哦！请重新选择。", "error");
                        else this.setClient(action, file);
                    });
                    let timer = null;
                    let progress = (event) => timer = clearTimeout(timer) || setTimeout(() => this.plugins.modal.toast("上传进度：" + event.percent + "%", "info"), 200);
                    this.loading = true;
                    this.plugins.user.uploadFile(data, "image", progress).then((res) => {
                        this.loading = false;
                        if (res.code === 0) {
                            form.avatar = toMagicImgURL(res.data.value, 120, 120);
                            this.setClient("validate");
                        } else {
                            this.plugins.modal.alert("图片上传失败", res.code + "：" + res.msg, "error");
                        }
                    });
                } else if (action === "submit") {
                    if (!this.setClient("validate", true)) return;
                    this.loading = true;
                    this.plugins.user.setClient(form).then((res) => {
                        this.loading = false;
                        if (res.code === 0) {
                            this.plugins.modal.toast("保存成功！", "success");
                            this.setClient("end");
                            this.init();
                        } else {
                            this.plugins.modal.alert("保存失败", res.code + "：" + res.msg, "error");
                        }
                    });
                } else if (action === "end") {
                    this.$refs.clientSetForm.close();
                }
            },
            setClientMobile(action, data) {
                if (this.loading) return;
                let form = this.clientMobileSetForm;
                if (!action || action === "start") {
                    this.clientMobileSetForm = deepCopy(this.client);
                    this.setClientMobile("validate");
                    this.$refs.clientMobileSetForm.init();
                    this.$nextTick(() => this.$refs.clientMobileSetFormMobile.focus());
                } else if (action === "validate") {
                    let error = "";
                    form.mobile = string(form.mobile).trim();
                    error = error || (form.mobile ? /^1[3-9]\d{9}$/.test(form.mobile) ? "" : "手机号格式不正确！" : "");
                    if (data) this.plugins.modal.toast(error, "error");
                    return !error;
                } else if (action === "submit") {
                    if (!this.setClientMobile("validate", true)) return;
                    this.loading = true;
                    this.plugins.user.setClientMobile(form, form.mobile).then((res) => {
                        this.loading = false;
                        if (res.code === 0) {
                            this.plugins.modal.toast("设置成功！", "success");
                            this.setClientMobile("end");
                            this.init();
                        } else {
                            this.plugins.modal.alert("设置失败", res.code + "：" + res.msg, "error");
                        }
                    });
                } else if (action === "end") {
                    this.$refs.clientMobileSetForm.close();
                }
            },
            setClientPassword(action, data) {
                if (this.loading) return;
                let form = this.clientPasswordSetForm;
                if (!action || action === "start") {
                    this.clientPasswordSetForm = deepCopy(this.client);
                    this.setClientPassword("validate");
                    this.$refs.clientPasswordSetForm.init();
                    this.$nextTick(() => this.$refs.clientPasswordSetFormPassword.focus());
                } else if (action === "validate") {
                    let error = "";
                    form.password = string(form.password);
                    error = error || (form.password ? "" : "请输入登录密码！");
                    error = error || (form.password.length >= 8 ? "" : "登录密码格式错误！");
                    if (data) this.plugins.modal.toast(error, "error");
                    return !error;
                } else if (action === "submit") {
                    if (!this.setClientPassword("validate", true)) return;
                    this.loading = true;
                    this.plugins.user.setClientPassword(form, form.password).then((res) => {
                        this.loading = false;
                        if (res.code === 0) {
                            this.plugins.modal.toast("设置成功！", "success");
                            this.setClientPassword("end");
                        } else {
                            this.plugins.modal.alert("设置失败", res.code + "：" + res.msg, "error");
                        }
                    });
                } else if (action === "end") {
                    this.$refs.clientPasswordSetForm.close();
                }
            },
            setClientNodes(action, data) {
                if (this.loading) return;
                let form = this.clientNodesSetForm;
                if (!action || action === "start") {
                    this.clientNodesSetForm = deepCopy(this.client);
                    this.setClientNodes("validate");
                    this.$refs.clientNodesSetForm.init();
                } else if (action === "validate") {
                    let error = "";
                    if (data) this.plugins.modal.toast(error, "error");
                    return !error;
                } else if (action === "submit") {
                    if (!this.setClientNodes("validate", true)) return;
                    this.loading = true;
                    this.plugins.user.setClientNodes(form, form.nodes).then((res) => {
                        this.loading = false;
                        if (res.code === 0) {
                            this.plugins.modal.toast("保存成功！", "success");
                            this.setClientNodes("end");
                            this.init();
                        } else {
                            this.plugins.modal.alert("保存失败", res.code + "：" + res.msg, "error");
                        }
                    });
                } else if (action === "end") {
                    this.$refs.clientNodesSetForm.close();
                }
            },
            addClientDapment() {
                if (this.loading) return;
                let dapment = this.plugins.user.formatClientDapment();

                let client = this.client;
                dapment.client.id = client.id;
                dapment.client.name = client.name;
                this.setClientDapment("start", dapment);
            },
            setClientDapment(action, data) {
                if (this.loading) return;
                let form = this.clientDapment;
                if (!action || action === "start") {
                    this.clientDapment = deepCopy(data);
                    this.setClientDapment("validate");
                    this.$refs.clientDapment.init();
                    this.$nextTick(() => this.$refs.clientDapmentDuty.focus());
                } else if (action === "validate") {
                    let error = "";
                    error = error || (form.dapt.id ? "" : "请选择单位！");
                    form.level = string(form.level).trim();
                    form.duty = string(form.duty).trim();
                    if (data) this.plugins.modal.toast(error, "error");
                    return !error;
                } else if (action === "pick-dapt-start") {
                    this.$refs.daptPicker.init();
                    this.$nextTick(() => this.$refs.daptPickerList.init());
                } else if (action === "pick-dapt-end") {
                    this.$refs.daptPicker.close();
                    if (data) form.dapt = deepCopy(data);
                    this.setClientDapment("validate");
                } else if (action === "submit") {
                    if (!this.setClientDapment("validate", true)) return;
                    else this.loading = true;
                    if (form.id) this.plugins.user.setClientDapment(form.client, form.dapt, form).then((res) => {
                        this.loading = false;
                        if (res.code === 0) {
                            this.plugins.modal.toast("保存成功！", "success");
                            this.setClientDapment("end");
                            this.init();
                        } else {
                            this.plugins.modal.alert("保存失败", res.code + "：" + res.msg, "error");
                        }
                    });
                    else this.plugins.user.addClientDapment(form.client, form.dapt, form).then((res) => {
                        this.loading = false;
                        if (res.code === 0) {
                            this.plugins.modal.toast("添加成功！", "success");
                            this.setClientDapment("end");
                            this.init();
                        } else {
                            this.plugins.modal.alert("添加失败", res.code + "：" + res.msg, "error");
                        }
                    });
                } else if (action === "end") {
                    this.$refs.clientDapment.close();
                }
            },
            delClientDapment(...dapments) {
                if (this.loading) return;
                if (dapments.length === 0) return this.plugins.modal.toast("请先勾选要删除的所属单位哦！", "warning");
                let content = " <span style='color:red;'>" + (dapments.length > 1 ? "勾选的" + dapments.length + "个所属单位" : dapments[0].dapt.name) + "</span> 吗？";
                this.plugins.modal.alert("删除确认", "确定删除" + content, "warning", ["确定删除", "再想想"]).then((ok) => {
                    if (!ok) return;
                    this.loading = true;
                    this.plugins.user.delClientDapment(...dapments).then((res) => {
                        this.loading = false;
                        if (res.code === 0) {
                            this.plugins.modal.toast("删除成功！", "success");
                            this.init();
                        } else {
                            this.plugins.modal.alert("删除失败", res.code + "：" + res.msg, "error");
                        }
                    });
                });
            },
            addClientDepment() {
                if (this.loading) return;
                let depment = this.plugins.user.formatClientDepment();
                let client = this.client;
                depment.client.id = client.id;
                depment.client.name = client.name;
                this.setClientDepment("start", depment);
            },
            setClientDepment(action, data) {
                if (this.loading) return;
                let form = this.clientDepment;
                if (!action || action === "start") {
                    this.filterValue = ""
                    this.clientDepment = deepCopy(data);
                    // 身份 角色
                    if(this.clientDepment.primary == 'yes'){
                        this.roleUserDept = 'primary'
                    }else{
                        this.roleUserDept = this.clientDepment.role
                    }
                    this.setClientDepment("validate");
                    this.$refs.clientDepment.init();
                    this.$nextTick(() => this.$refs.clientDepmentDuty.focus());
                } else if (action === "validate") {
                    let error = "";
                    error = error || (form.dept.id ? "" : "请选择部门！");

                    // 如果选了管理员，那么也是联络员
                    form.role = this.roleUserDept == 'primary'?this.env.depmentRoles[1].value:this.roleUserDept
                    form.primary =  this.roleUserDept == 'primary'?'yes':'not'

                    form.duty = string(form.duty).trim();
                    if (data) this.plugins.modal.toast(error, "error");
                    return !error;
                } else if (action === "pick-dept-start") {
                    this.$refs.deptPicker.init();
                    this.$nextTick(() => this.$refs.deptPickerList.init());
                } else if (action === "pick-dept-end") {
                    this.$refs.deptPicker.close();
                    if (data) form.dept = deepCopy(data);
                    this.setClientDepment("validate");
                } else if (action === "submit") {
                    if (!this.setClientDepment("validate", true)) return;
                    else this.loading = true;
                    if (form.id) this.plugins.user.setClientDepment(form.client, form.dept, form).then((res) => {
                        this.loading = false;
                        if (res.code === 0) {
                            this.plugins.modal.toast("保存成功！", "success");
                            this.setClientDepment("end");
                            this.init();
                        } else {
                            this.plugins.modal.alert("保存失败", res.code + "：" + res.msg, "error");
                        }
                    });
                    else this.plugins.user.addClientDepment(form.client, form.dept, form).then((res) => {
                        this.loading = false;
                        if (res.code === 0) {
                            this.plugins.modal.toast("添加成功！", "success");
                            this.setClientDepment("end");
                            this.init();
                        } else {
                            this.plugins.modal.alert("添加失败", res.code + "：" + res.msg, "error");
                        }
                    });
                } else if (action === "end") {
                    this.$refs.clientDepment.close();
                }
            },
            delClientDepment(...depments) {
                if (this.loading) return;
                if (depments.length === 0) return this.plugins.modal.toast("请先勾选要删除的所属部门哦！", "warning");
                let content = " <span style='color:red;'>" + (depments.length > 1 ? "勾选的" + depments.length + "个所属部门" : depments[0].dept.name) + "</span> 吗？";
                this.plugins.modal.alert("删除确认", "确定删除" + content, "warning", ["确定删除", "再想想"]).then((ok) => {
                    if (!ok) return;
                    this.loading = true;
                    this.plugins.user.delClientDepment(...depments).then((res) => {
                        this.loading = false;
                        if (res.code === 0) {
                            this.plugins.modal.toast("删除成功！", "success");
                            this.init();
                        } else {
                            this.plugins.modal.alert("删除失败", res.code + "：" + res.msg, "error");
                        }
                    });
                });
            },
            destroy() {
                if (this.loading) return;
                return true;
            },
            filterDept(){
                this.$nextTick(() => this.$refs.deptPickerList.filterDept());
            },
            init() {
                if (this.loading) return;
                let query = this.$route.query;
                let client = null;
                this.loading = true;
                this.clientId = query.clientId;
                this.client = cache(query.clientId);
                this.$root.$refs.navbar.init();
                this.plugins.user.call(async () => {
                    let res = await this.plugins.user.init();
                    if (res.code === 0) { }
                    return res;
                }, async () => {
                    if (this.access(this.$route.name)) return { code: 0 };
                    return this.env.xhrErrors.find((error) => error.code === 4);
                }, async () => {
                    let res = await this.plugins.user.getClient(query.clientId);
                    var abc = [];
                    if(res.data.sysStorageList != undefined){
                        res.data.sysStorageList.forEach(item => {
                            var type
                            if(item.objName.substring(item.objName.lastIndexOf(".")+1) == 'jpg' || item.objName.substring(item.objName.lastIndexOf(".")+1) =="png"){
                                console.log(item.objName.lastIndexOf(".")+1);
                                type ="image"
                            }else{
                                type = "document"
                            }
                        var obj = {
                            id:item.objId,
                            name:item.objName.substring(item.objName.lastIndexOf("/")+1),
                            type:type,
                            value:item.objPath
                        }
                        abc.push(obj)
                        });
                    this.sysStorageList = abc;
                    }

                    if (res.code === 0) client = res.data;
                    return res;
                }).then((res) => {
                    this.loading = false;
                    this.$root.$refs.navbar.init();
                    if (res.code === 0) {
                        this.client = cache(query.clientId, client);
                    } else if (res.code === 2) {
                        this.$root.$refs.navbar.login();
                    } else {
                        this.plugins.modal.alert("页面加载失败", res.code + "：" + res.msg, "error").then(() => this.$router.replace("/org/clients"));
                    }
                });
            },
        },
    };
</script>

<style lang="scss">
    .page-org-client {
        overflow: hidden;
    }
</style>
